import { Component, OnInit, ViewChild, AfterViewChecked } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { User } from '../../models/User';
import { LoginService } from '../../service/loginService';
import { NgForm } from '@angular/forms';
declare var $: any;
import { UserService } from '../../service/userService';

@Component({
  templateUrl: './login.html',
  styleUrls: ['./login.css']
})
export class LoginComponent implements OnInit, AfterViewChecked {
  user: User;
  messages = {
    username: '',
    password: '',
  };
  messages1 = {
    username: '',
    newPassword: '',
    confirmPassword: '',
  }
  updateUser: User;
  @ViewChild('loginForm')
  loginForm: NgForm;
  @ViewChild('forgetForm')
  forgetForm: NgForm;
  ngAfterViewChecked() {
    if (this.loginForm) {
      this.loginForm.valueChanges.subscribe(data => this.checkValidate());
    }
    if (this.forgetForm) {
      this.forgetForm.valueChanges.subscribe(data => this.checkValidate1());
    }
  }
  constructor(private route: ActivatedRoute, private loginService: LoginService, private router: Router, private userService: UserService) {

  }
  ngOnInit() {
    this.user = new User();
    this.updateUser = new User();
  }

  login() {
    this.checkValidate(true);
    if (this.loginForm.invalid) {
      return false;
    }
    this.loginService.login(this.user).subscribe((res) => {
      if (res.success) {
        this.loginService.user = res.user;
        this.router.navigate(['/index']);
      } else {
        this.messages.password = LoginComponent.ErrorMessages.password.unMatched;
      }
    })
  }
  checkValidate(isSubmit?: boolean) {
    const form = this.loginForm;

    for (const field in LoginComponent.ErrorMessages) {

      const control = form.controls[field];

      if (control && control.valid) {
        this.messages[field] = '';
      }
      if (control && (control.dirty || isSubmit) && !control.valid) {
        const messages = LoginComponent.ErrorMessages[field];
        if (control.errors) {
          this.messages[field] = messages[Object.keys(control.errors)[0]];
        }
      }
    }
  }
  checkValidate1(isSubmit?: boolean) {
    const form = this.forgetForm;

    for (const field in LoginComponent.ErrorMessages1) {

      const control = form.controls[field];

      if (control && control.valid) {
        this.messages1[field] = '';
      }
      if (control && (control.dirty || isSubmit) && !control.valid) {
        const messages = LoginComponent.ErrorMessages1[field];
        if (control.errors) {
          this.messages1[field] = messages[Object.keys(control.errors)[0]];
        }
      }

    }
  }
  surename() {
    this.checkValidate1(true);
    if (this.forgetForm.invalid) {
      return false;
    }
    this.userService.findpassword(this.updateUser.username, this.updateUser.address).subscribe((res) => {
      if (res.success) {
        $('.login-box').toggleClass('flipped');
        return false;
      } else {
        alert('用户名不存在！');
      }
    })
  }
  static ErrorMessages = {
    username: {
      required: '用户名不能为空',
      notExist: '用户名不存在'
    },
    password: {
      required: '密码不能为空',
      unMatched: '用户名密码不匹配'
    },
  };
  static ErrorMessages1 = {
    username: {
      required: '用户名不能为空',
      notExist: '用户名不存在'
    },
    newPassword: {
      required: '密码不能为空',
      pattern: '大于6位，必须由数字，字母共同组成'
    },
    confirmPassword: {
      required: '确认密码不能为空',
      pattern: '两次密码不一样'
    }
  };

  addClass() {
    $('.login-box').toggleClass('flipped');
    return false;
  }
}
